<template>
    <div class="navbar-fixed-bottom">
        <div class="thumbnail col-md-1 col-sm-1">
            <img v-show="!mutedStream" :src="portrait" style="vertical-align">
            <video v-show="!!this.mutedStream" autoplay v-stream="mutedStream"></video>
            <button class="btn btn-sm" @click="setDisplay({'stream':mutedStream})">
                本人
            </button>
        </div>
        <div class="col-sm-1 col-md-1"></div>
        <template v-for="f in friends">
            <div class="thumbnail col-sm-1 col-md-1">
                <img v-show="!f.stream" :src="f.portrait" style="vertical-align:top">
                <video v-show="!!f.stream" autoplay v-stream="f.stream"></video>
                <button class="btn btn-sm" @click="setDisplay(f)">
                    {{f.name}}
                </button>
            </div>
        </template>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
/* eslint-disable */
export default {
    name:'FriendBar',
    data () {
        return {
            
        }
    },
    computed: {
        ...mapGetters(['userName','portrait','friends','dispalyVideo','cameraVideoStream','mutedStream']),
        showSelfPortrait(){
            return !this.dispalyVideo;
        },
        showSelfVideo(){
            return !!this.dispalyVideo;
        },
    },
    methods: {
        ...mapMutations({
            setDisplay:'DISPALY_VIDEO'
        }),

    }
}
</script>